<template>
    <NavBar ref="NavBar" v-on:showpage="showPage"/>
    <SwiperPage v-on:checkpage="CheckPage"  ref="SwiperPage" currentIndex="1"/>
    <FootData/>
  </template>
  
  <script>
  import SwiperPage from './SwiperPage.vue'
  import NavBar from './NavBar.vue'
  import FootData from './FootData.vue'
  
  export default {
    name: 'HomeIndex',
    components: {
       SwiperPage,
       NavBar,
       FootData
    },
    methods: {
      handleClick(index) {
            this.$refs.SwiperPage.slideTo(index);
            this.$refs.NavBar.ShowColor(index);
      },
      showPage(index){
        console.log(index);
        this.handleClick(index);
      },
      CheckPage(index){
        this.$refs.NavBar.ShowColor(index);
      }
  
    }
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  </style>
  